<template>
  <div class=''>
    12
    <draggable
        class="list-group"
        tag="ul"
        v-model="list"
        v-bind="{
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }"
      >
          <li
            class="list-group-item"
            v-for="element in list"
            :key="element.order"
          >
            {{ element.name }}
          </li>
      </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
]
export default {
  name: '',
  components: {draggable},
  props: {},
  data() {
    return {
        list: message.map((name, index) => {
            return { name, order: index + 1 };
        })
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped></style>